<template>
  <div class="left-container">
    <div class="app-logo">
      <img src="/static/img/normal/system/logo.png" :alt="title" />
      <div>{{ logoStr }}</div>
    </div>
    <div class="app-context">
      <img src="/static/img/svg/login-box-bg.svg" :alt="title" />
      <div>{{ describe }}</div>
    </div>
  </div>
</template>
<script lang='ts'>
/**
 * 说明:
 * emit:
 *
 * 创建时间: 2021-02-24
 * 创建者: Q
 */
import { defineComponent } from "vue";

export default defineComponent({
  name: "LoginLeftComponent",
  setup() {
    const title = "";
    const logoStr = "后台管理 模板";
    const describe = "后台管理系统";
    return { title, logoStr, describe };
  },
});
</script>
<style lang='scss' scoped>
.left-container {
  display: flex;
  align-items: center;
  position: relative;
  .app-logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 40px 0;
    height: 48px;
    line-height: 48px;
    display: flex;
    img {
      width: 48px;
      height: 48px;
    }
    & > div {
      margin-left: 30px;
      font-size: 1.8rem;
      color: white;
    }
  }

  .app-context {
    img {
      width: 20vw;
    }
    & > div {
      margin-top: 18px;
      font-size: 2rem;
      color: white;
    }
  }
}
</style>